<template>
    <ul>
        <li :class="{active:item.isFlag}" v-for="(item,index) in arr" :key="item.id">
            <input type="checkbox" :checked="item.isFlag" @change="checkChange(item,$event)">
            <span>{{item.lists}}</span>
            <button class="btn" @click="dellist(index)">x</button>
        </li>
    </ul>

    <fieldset>
        <legend>详情</legend>
        <button @click="filter('all')">全部:{{allCount}}</button>
        <button @click="filter('completed')">已完成:{{completedCount}}</button>
        <button @click="filter('active')">未完成:{{activeCount}}</button>
    </fieldset>
</template>

<script setup>
    import { defineProps,toRefs,defineEmits } from 'vue';
    let props = defineProps(["arr",'allCount','completedCount','activeCount'])
    let emits = defineEmits(['del','get'])

    let {arr,allCount,completedCount,activeCount} = toRefs(props)
    
    let dellist = index =>{
        emits('del',index)
    }
    
    let checkChange = (item,e)=>{
        console.log(e.target.checked);
        item.isFlag = e.target.checked
    }
   let filter =flag=>{
        emits('get',flag)
   }
</script>

<style scoped>
ul {
    position: relative;
    left: 114px;
    padding: 5px;
}

li {
    width: 300px;
    margin: 16px 0 16px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

li span {
    flex: 1;
}

.active {
    background-color: deeppink;
}

.btn {
    width: 30px;
    border: none;
    cursor: pointer;
    font-size: 24px;
}

fieldset {
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    margin: 5px;
    cursor: pointer;
}

input {
    margin: 6px;
    cursor: pointer;
}
</style>